<template>
  <div>
    <h1>List页面</h1> 
    <div class="box" v-for="item in list" :key="item.id" @click="listArr(item.id)">
      <div>{{item.goodsname}}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "List",
  mounted() { },
  data() {
    return {
      list: [],
      page: 1,
      //定义开关
      cur: true, 
    };
  },
  mounted() {
    window.addEventListener("scroll", this.scrollFn);
  },
  async created() {
    //发送网路请求
    var res = await this.$http({
      url: "/xuexiao/api/getgoodlist",
      params: {
        cateid: 3,
        page: this.page,
        size: 5,
        type: 1,
      },
    });
    console.log(res);
    //渲染列表
    var list = res.data.list.goodData;
    this.list = list;
  },
   methods: {
    //跳转详情页
    listArr(id) {
      this.$router.push({ path: "/detail", query: { id } });
    },
    //触底加载更多
    async scrollFn() {
      let clientHeight = document.documentElement.clientHeight;
      let scrollTop = document.documentElement.scrollTop;
      let docHeight = document.documentElement.scrollHeight;
      //触底要请求下一页数据
      if (clientHeight + scrollTop == docHeight) {
        //判断是否最后一页
        if (!this.cur) return;
        this.page += 1;
        var res = await this.$http({
          url: "/xuexiao/api/getgoodlist",
          params: {
            cateid: 3,
            page: this.page,
            size: 5,
            type: 1,
          },
        });
        var list = res.data.list.goodData || [];
        if (list.length < 5) {
          //开关
          this.cur = false; 
        }
        //跟上次数据合并 concat
        this.list = this.list.concat(list);
      }
    },
  },
};
</script>
<style lang="css">
.box {
  width: 300px;
  height: 200px;
  margin-top: 20px;
  border: 1px solid pink;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

</style>